<template>
  <div id="situation">
    <el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="whole" label="全网">
        <div class="report">
          <div class="report_title">PDP/PDN激活成功率</div>
          <p class="report_data" v-if="reports.pdp_ask_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ reports.pdp_ask_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">DNS连接成功率</div>
          <p class="report_data" v-if="reports.dns_ask_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ reports.dns_ask_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP连接成功率</div>
          <p class="report_data" v-if="reports.tcp_ask_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ reports.tcp_ask_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">HTTP连接成功率</div>
          <p class="report_data" v-if="reports.http_ask_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ reports.http_ask_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP12成功率</div>
          <p class="report_data" v-if="reports.tcp12_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ reports.tcp12_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP23成功率</div>
          <p class="report_data" v-if="reports.tcp23_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ reports.tcp23_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP12时延</div>
          <p class="report_data" v-if="reports.tcp_suc_req_time == null">-</p>
          <p class="report_data" v-else>
            {{ reports.tcp_suc_req_time }}ms
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP23时延</div>
          <p class="report_data" v-if="reports.tcp_create_time == null">-</p>
          <p class="report_data" v-else>
            {{ reports.tcp_create_time }}ms
          </p>
        </div>
      </el-tab-pane>
      <el-tab-pane name="situation_2G" label="2G">
        <div class="report">
          <div class="report_title">PDP/PDN激活成功率</div>
          <p class="report_data" v-if="differences.pdp_ask_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ differences.pdp_ask_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">DNS连接成功率</div>
          <p class="report_data" v-if="differences.dns_ask_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ differences.dns_ask_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP连接成功率</div>
          <p class="report_data" v-if="differences.tcp_ask_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ differences.tcp_ask_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">HTTP连接成功率</div>
          <p class="report_data" v-if="differences.http_ask_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ differences.http_ask_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP12成功率</div>
          <p class="report_data" v-if="differences.tcp12_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ differences.tcp12_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP23成功率</div>
          <p class="report_data" v-if="differences.tcp23_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ differences.tcp23_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP12时延</div>
          <p class="report_data" v-if="differences.tcp_suc_req_time == null">-</p>
          <p class="report_data" v-else>
            {{ differences.tcp_suc_req_time }}ms
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP23时延</div>
          <p class="report_data" v-if="differences.tcp_create_time == null">-</p>
          <p class="report_data" v-else>
            {{ differences.tcp_create_time }}ms
          </p>
        </div>
      </el-tab-pane>
      <el-tab-pane name="situation_4G" label="4G">
        <div class="report">
          <div class="report_title">PDP/PDN激活成功率</div>
          <p class="report_data" v-if="excellents.pdp_ask_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ excellents.pdp_ask_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">DNS连接成功率</div>
          <p class="report_data" v-if="excellents.dns_ask_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ excellents.dns_ask_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP连接成功率</div>
          <p class="report_data" v-if="excellents.tcp_ask_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ excellents.tcp_ask_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">HTTP连接成功率</div>
          <p class="report_data" v-if="excellents.http_ask_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ excellents.http_ask_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP12成功率</div>
          <p class="report_data" v-if="excellents.tcp12_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ excellents.tcp12_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP23成功率</div>
          <p class="report_data" v-if="excellents.tcp23_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ excellents.tcp23_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP12时延</div>
          <p class="report_data" v-if="excellents.tcp_suc_req_time == null">-</p>
          <p class="report_data" v-else>
            {{ excellents.tcp_suc_req_time }}ms
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP23时延</div>
          <p class="report_data" v-if="excellents.tcp_create_time == null">-</p>
          <p class="report_data" v-else>
            {{ excellents.tcp_create_time }}ms
          </p>
        </div>
      </el-tab-pane>
      <el-tab-pane name="situation_NB-IOT" label="NB-IOT">
        <div class="report">
          <div class="report_title">PDP/PDN激活成功率</div>
          <p class="report_data" v-if="nbiots.pdp_ask_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ nbiots.pdp_ask_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">DNS连接成功率</div>
          <p class="report_data" v-if="nbiots.dns_ask_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ nbiots.dns_ask_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP连接成功率</div>
          <p class="report_data" v-if="nbiots.tcp_ask_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ nbiots.tcp_ask_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">HTTP连接成功率</div>
          <p class="report_data" v-if="nbiots.http_ask_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ nbiots.http_ask_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP12成功率</div>
          <p class="report_data" v-if="nbiots.tcp12_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ nbiots.tcp12_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP23成功率</div>
          <p class="report_data" v-if="nbiots.tcp23_success_rate == null">-</p>
          <p class="report_data" v-else>
            {{ nbiots.tcp23_success_rate }}%
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP12时延</div>
          <p class="report_data" v-if="nbiots.tcp_suc_req_time == null">-</p>
          <p class="report_data" v-else>
            {{ nbiots.tcp_suc_req_time }}ms
          </p>
        </div>
        <div class="report">
          <div class="report_title">TCP23时延</div>
          <p class="report_data" v-if="nbiots.tcp_create_time == null">-</p>
          <p class="report_data" v-else>
            {{ nbiots.tcp_create_time }}ms
          </p>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: ["reports", "excellents", "differences", "nbiots"],
  data() {
    return {
      activeName: "whole",
    };
  },
  mounted() {},
  methods: {
    // 页面切换
    handleClick(tab, event) {
      this.$emit("switch", this.activeName);
    },
  },
};
</script>

<style>
#situation {
  width: 17vw;
  height: 89vh;
  background: #edf1f9;
  position: absolute;
  top: 4vh;
  left: 1vw;
}
#situation .report {
  width: auto;
  height: 8vh;
  text-align: center;
  padding: 0.5vh 0.5vw;
}
#situation .report_title {
  font-size: 18px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
}
#situation .report_data {
  color: #2977ff;
  font-size: 25px;
  font-family: Microsoft YaHei, Microsoft YaHei-Bold;
  font-weight: 700;
}
#situation .report_img {
  display: inline-block;
  width: 0.8vw;
  height: 0.8vw;
  border: 1px solid #006eab;
  text-align: center;
  border-radius: 50%;
  font-size: 12px;
}
@media screen and (max-width: 1366px) {
  #situation {
    width: 17vw;
    height: 89vh;
    background: #edf1f9;
    position: absolute;
    top: 4vh;
    left: 1vw;
  }
  #situation .report {
    width: auto;
    height: 8vh;
    text-align: center;
    padding: 0.5vh 0.5vw;
  }
  #situation .report_title {
    font-size: 15px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    text-align: left;
  }
  #situation .report_data {
    color: #2977ff;
    font-size: 23px;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    font-weight: 700;
  }
  #situation .report_img {
    display: inline-block;
    width: 0.8vw;
    height: 0.8vw;
    border: 1px solid #006eab;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
  }
}
</style>